<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-gradual-fff">
			<block slot="content">个人测试</block>
		</cu-custom>
		<u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page>
		<view v-show="!showLoading">
			<view class="viewbox"></view>
			<view class="self_a" @click="goPage('/pages/test_center/Records')">
				<view class="self_a_a">测试记录</view>
				<view class="self_a_b">
					<u-icon class="icon1" name="arrow-right" color="#ffffff" size="10"></u-icon>
				</view>
			</view>
			<view class="self_b">
				<view class="question">1. 你的性别?</view>
				<view class="question-wrap">
					<u-radio-group placement="column" v-model="sex">
						<u-radio 
							:customStyle="{marginBottom: '8px', lineHeight: '20px'}" 
							label="男" 
							name="男"
							labelColor="#FFFFFF"
							activeColor="#B690C2"
							inactiveColor="#B690C2"
						>
						</u-radio>
						<u-radio 
							:customStyle="{marginBottom: '8px', lineHeight: '20px'}" 
							label="女" 
							name="女"
							labelColor="#FFFFFF"
							activeColor="#B690C2"
							inactiveColor="#B690C2"
						>
						</u-radio>
					</u-radio-group>
				</view>
				<view v-for="(question,questionIndex) in questionData" :key="questionIndex" class="question-wrap">
					<view class="question">{{questionIndex+2}}. {{question.question}}</view>
					<u-radio-group v-model="questionValue[questionIndex]" placement="column">
						<u-radio 
							:customStyle="{marginBottom: '8px', lineHeight: '20px'}"
							v-for="(item, index) in question.list" 
							:key="index" 
							:label="item.answer"
							:name="getName(item,index)"
							labelColor="#FFFFFF"
							activeColor="#B690C2"
							inactiveColor="#B690C2"
						>
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="self_c" :class="disabled?'self_cc':''" @click="handleAnalysis">开始测试</view>
		</view>
	</view>
</template>
<script>
import request from '@/common/request.js';
import {
	questionData
} from '@/utils/hera.js'
export default {
	data() {
		return {
			showLoading:false,
			sex: '',
			questionData,
			questionValue: new Array(questionData.length).fill('')
		}
	},
	onShow(){
		this.uid=uni.getStorageSync('uid');
	},
	mounted() {
	
	},
	computed: {
		disabled() {
			return !this.sex || this.questionValue.some(el => el === '')
		}
	},
	methods: {
		goPage(url) {
			if (!this.$util.isLogin()) {
				return;
			}
			uni.navigateTo({
				url
			});
		},
		getName(item,index) {
			const score = item.score === undefined ? 19 : item.score
			return `${item.type}-${index}-${score}`
		},
		handleAnalysis() {
			const result = {}
			for (const i of this.questionValue) {
				const type = i.split('-')[0]
				const score = Number(i.split('-')[2])
				result[type] = result[type] ? result[type] + score : score
			}
			const pageUrl = '/pages/hera-question/hera-result'
			uni.navigateTo({
				url: `${pageUrl}?data=${JSON.stringify(result)}&sex=${this.sex}`,
			})
		}
	}
}
</script>

<style  lang="scss" scoped>
	.self_a{
		width: 700rpx;
		height: 120rpx;
		margin: auto;
		box-shadow: inset 0 0 20rpx 20rpx rgba(85, 56, 105, 1);
		margin-top:20rpx;
		padding: 0 46rpx;
	}
	.self_a_a{
		float: left;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 120rpx;
	}
	.self_a_b{
		float:right;
		margin-top: 50rpx;
	}
	.self_b{
		box-shadow: inset 0 0 20rpx 20rpx #583770;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		width: 700rpx;
		height:auto;
		padding: 50rpx 45rpx;
		margin: auto;
	}
	
	.self_c{
		width: 528rpx;
		height: 88rpx;
		background: #62469B;
		border-radius: 44rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		margin: auto;
		margin-top: 55rpx;
	}
	.self_cc{
		opacity: 0.5;
	}
	
	.question-wrap {
		+.question-wrap {
			padding-top: 10px;
			border-top: 1px dashed #351740;
		}
		margin-bottom: 10px;
	}
	
	.question {
		color:#fff;
		font-size: 15px;
		line-height: 20px;
		margin-bottom: 8px;
	}
	/deep/ .u-radio__text {
		line-height: 20px !important;
		color: #fff !important;
	}
</style>